<template>
    <div class="knowledgeStatis">
        <div class="knowledgeCard mb20">
            <div class="item">
                <p class="title">知识量</p>
                <p class="count">{{isExist(summary.allQuestionCount)}}</p>
            </div>
            <div class="item">
                <p class="title">生效知识量</p>
                <p class="count">{{isExist(summary.availableQuestionCount)}}</p>
            </div>
            <div class="item">
                <p class="title">失效知识量</p>
                <p class="count">{{isExist(summary.unavailableQuestionCount)}}</p>
            </div>
            <div class="item">
                <p class="title">目录数量</p>
                <p class="count">{{isExist(summary.questionClassCount,"0/0/0")}}</p>
            </div>
        </div>
        <div class="flexbetween betweenCard mb20">
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">知识类型占比</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai" @click="exportKnowledgeRatio"></span>
                    </el-tooltip>
                </div>
                <div class="card-body">
                    <echarts :optionData="pieOption"></echarts>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <span class="title">知识配置情况分析</span>
                </div>
                <div class="card-body configCard">
                    <div class="configAnalyze mr20">
                        <p class="analyze">知识点总量：{{allAnalysis.availableQuestionCount+allAnalysis.unavailableQuestionCount}}条</p>
                        <p class="analyze">未配置答案：{{isExist(allAnalysis.questionNoAnswerCount)}}条</p>
                        <p class="analyze">生效知识点：{{isExist(allAnalysis.availableQuestionCount)}}条</p>
                        <p class="analyze">失效知识点：{{isExist(allAnalysis.unavailableQuestionCount)}}条</p>
                    </div>
                    <div class="rightAnalyze">
                        <div class="configAnalyze">
                            <p class="analyze">FAQ知识点总量：{{faqAnalysis.availableQuestionCount+faqAnalysis.unavailableQuestionCount}}条</p>
                            <!-- <p class="analyze">未配置答案：{{isExist(faqAnalysis.questionNoAnswerCount)}}条</p> -->
                            <p class="analyze">生效知识点：{{isExist(faqAnalysis.availableQuestionCount)}}条</p>
                            <p class="analyze">失效知识点：{{isExist(faqAnalysis.unavailableQuestionCount)}}条</p>
                        </div>
                        <div class="configAnalyze">
                            <p class="analyze">
                                多轮知识点总量：{{dialogueAnalysis.availableQuestionCount+dialogueAnalysis.unavailableQuestionCount}}条</p>
                            <!-- <p class="analyze">未配置答案：{{isExist(dialogueAnalysis.questionNoAnswerCount)}}条</p> -->
                            <p class="analyze">生效知识点：{{isExist(dialogueAnalysis.availableQuestionCount)}}条</p>
                            <p class="analyze">失效知识点：{{isExist(dialogueAnalysis.unavailableQuestionCount)}}条</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header flexbetween">
                <span class="title">知识配置异常检测</span>
            </div>
            <div class="card-body">
                <el-radio-group v-model="listType" size="small" class="mb20 listType" @change="changeQuesType">
                    <el-radio-button label="questionLessSim">相似问法过少({{similarCount}})</el-radio-button>
                    <el-radio-button label="questionAnswerExpired">含失效答案({{answerCount}})</el-radio-button>
                </el-radio-group>
                <element-table :data="dataList" :columns="cloumns" :loading="tableLoading" :tableHeight="350" :pageNo="pageNo"
                               :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize"
                               :pagFixed="false">
                </element-table>
            </div>
        </div>

        <!-- 编辑相似问法 -->
        <similar-question :similarQuestion.sync="similarQuestion" isReport ref="similarQuestionDialog"></similar-question>

        <!-- 添加编辑问题 -->
        <add-question :questionVisible.sync="questionVisible" questionTitle="知识点编辑" isReport ref="questionDialog"></add-question>

        <!-- 导出 -->
        <exportExcel ref="exportExcel"></exportExcel>
    </div>
</template>

<script>
import echarts from "@/components/Echarts";
import exportExcel from "@/components/exportExcel";
import { getPieOption } from "@/components/Echarts/option";
import elementTable from "@/components/elementTable";
import addQuestion from "@/views/robotKnowledge/knowledge/faqManage/addQuestion.vue";
import similarQuestion from "@/views/robotKnowledge/knowledge/faqManage/similarQuestion.vue";
import { knowledgeSummary, knowledgeRation, knowledgeAnalysis, abnormalDetect, exportKnowledgeRatio } from "@/api/robotReport.js";
export default {
    name: "knowledgeStatis",
    data() {
        return {
            pieOption: {
                yAxis: { axisLine: { show: false } }
            },
            listType: "questionLessSim",
            dataList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            similarCloumns: [
                {
                    config: {
                        label: "标准问",
                        prop: "question"
                    },
                },
                {
                    config: {
                        label: "相识问法量",
                        prop: "similarCount"
                    },
                },
                {
                    config: {
                        label: "操作",
                        width: "150"
                    },
                    render: (h, scope) => {
                        return (
                            <div class="operation">
                                <el-tooltip effect="light" content="相似问法" placement="top" enterable={false}>
                                    <span class="iconfont icon-bianjixiangsiwenfa" onClick={() => this.editSimilar(scope)}></span>
                                </el-tooltip>
                            </div>
                        );
                    },
                },
            ],
            answerCloumns: [
                {
                    config: {
                        label: "标准问",
                        prop: "question"
                    },
                },
                {
                    config: {
                        label: "答案量",
                        prop: "answerCount"
                    },
                },
                {
                    config: {
                        label: "失效答案量",
                        prop: "time"
                    },
                },
                {
                    config: {
                        label: "操作",
                        width: "150"
                    },
                    render: (h, scope) => {
                        return (
                            <div class="operation">
                                <el-tooltip effect="light" content="编辑答案" placement="top" enterable={false}>
                                    <span class="iconfont icon-bianjidaan" onClick={() => this.editAnswer(scope.questionId)}></span>
                                </el-tooltip>
                            </div>
                        );
                    },
                },
            ],
            similarCount: 0,
            answerCount: 0,
            summary: {}, //顶部概要
            allAnalysis: {},
            faqAnalysis: {},
            dialogueAnalysis: {},
            similarQuestion: false,
            questionVisible: false
        }
    },
    methods: {
        getData() {
            knowledgeSummary({}).then(resp => {
                if (resp.status == 0) {
                    this.summary = resp.data;
                }
            });
            knowledgeAnalysis({}).then(resp => {
                if (resp.status == 0) {
                    this.allAnalysis = resp.data.all;
                    this.faqAnalysis = resp.data.faq;
                    this.dialogueAnalysis = resp.data.dialogue;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
            this.getPieData();
            this.getQueList();
            abnormalDetect({ type: "questionAnswerExpired" }).then(resp => {
                if (resp.status == 0) {
                    this.answerCount = resp.data.total;
                }
            });
        },
        getPieData() {
            knowledgeRation({}).then(resp => {
                if (resp.status == 0) {
                    var data = resp.data;
                    let pieOption = {
                        color: ["#537EF7", "#7DD9F4"],
                        series: [
                            {
                                data: [
                                    { value: data.faq, name: 'FAQ知识' },
                                    { value: data.dialogue, name: '多轮知识' }
                                ]
                            }
                        ]
                    };
                    this.pieOption = getPieOption(pieOption);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        getQueList() {
            this.tableLoading = true;
            var param = {
                type: this.listType,
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }
            abnormalDetect(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    this.total = resp.data.total;
                    this.dataList = resp.data.list;
                    if (this.listType == "questionLessSim") {
                        this.similarCount = this.total;
                    } else {
                        this.answerCount = this.total;
                    }
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        changeQuesType() {
            this.dataList = [];
            this.pageNo = 1;
            this.total = 0;
            this.getQueList();
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getQueList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getQueList();
        },
        //编辑相似问法
        editSimilar(data) {
            var param = { id: data.questionId, question: data.question };
            this.similarQuestion = true;
            this.$refs.similarQuestionDialog.findSimilarQuestion(param);
        },
        //编辑答案
        editAnswer(id) {
            this.$refs.questionDialog.findQuesById(id);
            this.questionVisible = true;
        },
        isExist(val, defaultVal = 0) {
            return val ? val : defaultVal;
        },
        exportKnowledgeRatio() {
            this.$refs.exportExcel.showLoading();
            exportKnowledgeRatio().then(resp => {
                this.$refs.exportExcel.closeLoading();
                if (resp.status == 0) {
                    this.$refs.exportExcel.exports("知识类型占比", resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        }
    },
    created() {
        this.getData();
    },
    computed: {
        cloumns() {
            return this.listType == "questionLessSim" ? this.similarCloumns : this.answerCloumns;
        }
    },
    components: {
        echarts,
        elementTable,
        addQuestion,
        similarQuestion,
        exportExcel
    }
}
</script>

<style lang="scss">
.knowledgeStatis {
    .knowledgeCard {
        display: flex;
        .item {
            border-radius: 20px;
            background: #fff;
            height: 180px;
            margin-right: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            &:last-child {
                margin-right: 0;
            }
            .title {
                font-size: 18px;
                color: #676e75;
                margin-bottom: 22px;
            }
            .count {
                font-size: 30px;
                line-height: 30px;
                color: #363c43;
            }
        }
    }
    .flexbetween {
        .card-body {
            height: 400px;
        }
    }
    .configCard {
        display: flex;
        > div {
            flex: 1;
            flex-shrink: 0;
        }
        .configAnalyze {
            border-radius: 20px;
            padding: 20px;
            background: #f5f7fa;
            p {
                color: #676e75;
                margin-bottom: 20px;
                &:first-child {
                    color: #363c43;
                    font-weight: bold;
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        .rightAnalyze {
            display: flex;
            flex-direction: column;
            .configAnalyze {
                flex: 1;
                flex-shrink: 0;
                &:first-child {
                    margin-bottom: 20px;
                }
            }
        }
    }
    .listType {
        .is-active {
            .el-radio-button__inner {
                color: #fff;
            }
        }
        .el-radio-button__inner {
            padding: 9px 20px;
            font-size: 14px;
            color: #90979d;
        }
    }
}
</style>